<template>
  <div ref="chart" style="width: 1000px; height: 500px;background-color: #7e9cff" class="charts"></div>
</template>

<script>
  import * as echarts from 'echarts';
  import axios from 'axios';

  export default {
    data() {
      return {
        result: [],
        dates: [],
        indexs: [],
      };
    },
    mounted() {
      axios({
        method: 'get',
        url: 'http://127.0.0.1:4523/m2/3571383-0-default/130031830',
      })
        .then((res) => {
          console.log('请求成功');
          console.log(res);
          this.result = res.data.result;
          for (var i = 0; i < res.data.result.length; i++) {
            this.dates.push(res.data.result[i]['date']);
            console.log(res.data.result[i]['index']);
            this.indexs.push(parseInt(res.data.result[i]['index']));
            console.log(this.indexs);
          }
          this.createChart();
        })
        .catch((error) => {
          console.log('请求失败');
          console.log('error');
        });
    },
    methods: {
      createChart() {
        const chart = echarts.init(this.$refs.chart);
        const option = {
          color: ['#ffffff'],
          tooltip: {
            trigger: 'axis',
          },
          lengend:{
            data: ['搜索指数']
          },
          grid: {
            top: '30%',
            left: '10%',
            right: '10%',
            bottom: '20%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: this.dates,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(20, 35, 87, 1)',
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E6E6FA', // y 轴轴线颜色
              },
            },
            splitLine: {
              lineStyle: {
                color: '#FFDEAD', //grid 区域中的分隔线颜色
                width: 1,
                type: 'solid',
              },
            },
          },
          series: [
            {
              data: this.indexs,
              type: 'line',
              smooth: true,
              areaStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.1,
                      color: 'rgba(6, 252, 254, 0.1) ', // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(6, 252, 254, 0.5)', // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: 'rgba(6, 252, 254, 0.3)', // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: 'rgba(0,0,0, 0.1)', // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          ],
        };
        chart.setOption(option);
      },
    },
  };
</script>

<style>
.charts{
  display: flex;
  margin: auto;
  align-content: center;
}
</style>
